<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>基本时钟</title>
  <style>
    .clock {
      width: 400px;
      margin: 100px auto;
      background: #ddd;
      border-radius: 20px;
    }
  </style>
</head>

<body>
  <div class="clock">
    <canvas id="canvas" height="400px" width="400px"></canvas>
  </div>

  <script>
    const canvas = document.getElementById('canvas')
    const ctx = canvas.getContext('2d')



    //定义基础变量
    const w = h = 400;//时钟宽高
    const x = y = 200;//时钟中心坐标
    const r = 180;//时钟半径
    const r_hour = 60;//时针长度
    const r_minute = 120;//分针长度
    const r_second = 140;//秒针长度
    const r_text = 140;//定义表盘文字的半径
    const r_square = 165;//刻度
    const r_cicle = 10;//表盘小圆点
    const deg = 2 * Math.PI;//定义的基本圆周

    //平移中心点
    ctx.translate(w / 2, h / 2)

    function clock () {
      //1.画圆盘
      drawCircle(0, 0, r, '#fff')

      //2.画时钟表针

      //获取当前时间：
      let date = new Date();
      let hour = date.getHours() * (deg / 12) - deg / 4
      let minute = date.getMinutes() * (deg / 60) - deg / 4
      let second = date.getSeconds() * (deg / 60) - deg / 4
      drawLine(0, 0, r_hour * Math.cos(hour), r_hour * Math.sin(hour), '#000', 10)
      drawLine(0, 0, r_minute * Math.cos(minute), r_minute * Math.sin(minute), '#000', 5)
      drawLine(0, 0, r_second * Math.cos(second), r_second * Math.sin(second), '#f00', 2)


      //3.画表钉
      drawCircle(0, 0, r_cicle, '#000')

      //4.画数字
      for (let i = 1; i <= 12; i++) {
        let θ = ((Math.PI * 2) / 12) * i - Math.PI / 2
        let x = r_text * Math.cos(θ)
        let y = r_text * Math.sin(θ)
        drawText(i, x, y)
      }
      //5.画刻度
      for (let i = 1; i <= 60; i++) {

        let θ = ((Math.PI * 2) / 60) * i - Math.PI / 2
        let x1 = r * Math.cos(θ)
        let y1 = r * Math.sin(θ)

        //判断是否为整点
        if (i % 5 == 0) {
          let x2 = r_square * Math.cos(θ)
          let y2 = r_square * Math.sin(θ)
          drawLine(x1, y1, x2, y2, "red", 3)
        } else {
          let x2 = (r_square + 4) * Math.cos(θ)
          let y2 = (r_square + 4) * Math.sin(θ)
          drawLine(x1, y1, x2, y2, "#aaa", 2)
        }
      }

    }
    //初始化执行一次
    clock()

    setInterval(function () {
      clock();
    }, 1000)

    //写文字
    function drawText (text, x, y) {
      ctx.font = 'bold 26px 微软雅黑'
      ctx.fillStyle = '#000'
      ctx.textAlign = 'center'
      ctx.textBaseline = 'middle'
      ctx.fillText(text, x, y)
    }
    //画直线
    function drawLine (x1, y1, x2, y2, color, width) {
      ctx.beginPath();
      ctx.moveTo(x1, y1)
      ctx.lineTo(x2, y2)
      ctx.strokeStyle = color
      ctx.lineWidth = width
      //让指针头变圆
      ctx.lineCap = 'round'
      ctx.stroke()
      ctx.closePath()
    }

    //画圆
    function drawCircle (x, y, r, color) {
      ctx.beginPath()
      ctx.arc(x, y, r, 0, Math.PI * 2)
      ctx.fillStyle = color
      ctx.fill()
      ctx.closePath()
    }
  </script>
</body>

</html>